<template>
  <div class="control">
    <div class="control-top ">
        <!-- <div class="title_box">东南角摄像头</div> -->
      <div class="left">
        <div class="btn btop pointer" @mousedown="setControl('01')" @mouseup="setControl('02')"></div>
        <div class="btn bleft pointer" @mousedown="setControl('05')" @mouseup="setControl('06')"></div>
        <div class="btn bright pointer" @mousedown="setControl('07')" @mouseup="setControl('08')"></div>
        <div class="btn bbottom pointer" @mousedown="setControl('03')" @mouseup="setControl('04')"></div>
      </div>
      <div class="right">
        <div class="betweenbox sf">
          <span class="el-icon-minus pointer" @mousedown="setControl('11')" @mouseup="setControl('12')"></span>
          <span class="hr"></span>
          <span class="el-icon-search"></span>
          <span class="hr"></span>
          <span class="el-icon-plus pointer" @mousedown="setControl('09')" @mouseup="setControl('10')"></span>
        </div>
        <div class="betweenbox jj">
          <span class="el-icon-minus pointer" @mousedown="setControl('19')" @mouseup="setControl('20')"></span>
          <span class="hr"></span>
          <span class="el-icon-help"></span>
          <span class="hr"></span>
          <span class="el-icon-plus pointer" @mousedown="setControl('17')" @mouseup="setControl('18')"></span>
        </div>
        <div></div>
      </div>
      <div></div>
    </div>
    
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class extends Vue {
  // 设置云台控制
  setControl(id) {
    this.$emit("setControl", id);
  }
//   //   窗口设置
//   setWindow(num) {
//     this.$emit("setWindow", num);
//   }
}
</script>

<style lang="scss" scoped>
.control {
  width: 100%;
  height: 100%;
  overflow: hidden;
  &-top {
    width: 100%;
    height: 100%;
  }
    // .title_box{
    //     height: 15%;
    //     width: 100%;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    // }
  .left {
    width: 70%;
    height: 55%;
    margin:  0  auto;
    margin-top: 0.15rem;
    background: url("../../../../../assets/img/VideoControl/control.png")
      no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    .btn {
      position: absolute;
      margin: auto;
      width: 0.5rem;
      height: 0.5rem;
    }
    .btop {
      top: 0px;
      left: 0;
      right: 0;
    }
    .bleft {
      top: 0;
      left: 0px;
      bottom: 0;
    }
    .bright {
      top: 0;
      right: 0px;
      bottom: 0;
    }
    .bbottom {
      bottom: 0px;
      left: 0;
      right: 0;
    }
  }
  .right {
    width:70%;
    // height:30%;
    margin: 0 auto;
    // margin-left: 0.06rem;
    .jj,
    .sf {
      font-size: 0.16rem;
      border: 1px solid #03bfff;
      border-radius: 3px;
      padding: 0.02rem 0.06rem;
      margin-top: 0.05rem;
     
    }
    .sf {
    //   margin-top: 0.4rem;
     vertical-align: middle;
    }
    .hr {
      display: inline-block;
      width: 1px;
      height: 0.2rem;
      background: #03bfff;
    }
  }
.el-icon-minus:before,.el-icon-search:before,.el-icon-plus:before,.el-icon-help:before{
    vertical-align: middle;
}
  .pointer {
    cursor: pointer;
  }
}
</style>

